<template>

<header class="header">
            <div class="top">
                <div class="container">
                    <div class="loginList">
                        <p>在线购物-乐器</p>
                    </div>
                    <div class="typeList">
                        <router-link to="/goods">主页</router-link>
                        <router-link to="/check">查询</router-link>
                        <router-link to="/aftersales">售后</router-link>
                        <div v-if="!$store.state.uid" class="typeList">
                        <router-link to="/login">登录</router-link>
                        <router-link to="/register">注册</router-link>
                        </div>
                        <div v-else class="typeList">
                        <router-link to="/home/personal">{{this.uname}}</router-link>
                        <el-link @click="logout">登出</el-link>
                        </div>
                        
                    </div>
                </div>
            </div>
            
        </header>

</template>

<script>
  export default {
  name:'Header',
  data(){
    return{
        uname:'',
    }
  },
  methods:{
     logout(){
        this.$store.dispatch('userLogout');
        this.$router.push('/login');
    },
    async getUser(){
        const uid = this.$store.state.uid;
        const res = await this.$store.dispatch("getUserInfo",{uid});
        this.uname=res.uname;
      },
    
    },
  computed:{
  },
  mounted(){
    if(this.$store.state.token){
        this.getUser();
    }
  }
}

</script>
<style scoped lang="less">
   .header {
        &>.top {
            background-color: #eaeaea;
            height: 30px;
            line-height: 30px;

            .container {
                width: 1200px;
                margin: 0 auto;
                overflow: hidden;

                .loginList {
                    float: left;

                    p {
                        float: left;
                        margin-right: 10px;

                        .register {
                            border-left: 1px solid #b3aeae;
                            padding: 0 5px;
                            margin-left: 5px;
                        }
                    }
                }

                .typeList {
                    float: right;

                    a {
                        padding: 0 10px;

                        &+a {
                            border-left: 1px solid #b3aeae;
                        }
                    }

                }

            }
        }

        
    }

</style>